<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_014_修饰符number、tirm、lazy</title>
    <style> 
        .radioClass{
            border:1px solid red;
            width:200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- number修饰符会将输入框自动转换为数值，如果不用numbeer，就会变成字符串拼接，例如： 12+13 结果为 1213,添加number后结果显示为25 -->
        <!-- 如果无法转换，就会变为字符串拼接，例如：输入框1输入2，输入框2输入er，返回的结果为2er -->
        <!-- trim修饰符为去掉字符串两边的空格 -->
        <!-- lazy修饰符作用：将input事件改为change事件 
        input事件：当输入框输入字符时触发事件
        change事件：当输入框失去焦点时触发事件
        -->
        数值1：<input type="text" v-model.number="num1" /><br />
        数值2：<input type="text" v-model.number="num2" /><br />
        <input type="button" value="计算" v-on:click="jisuan()">
        <div>
            和：<span v-text="sum"></span>
        </div>
        不用lazy修饰符 <input type="text" v-model="msg"><br />
        使用lazy修饰符 <input type="text" v-model.lazy="msg"><br />
        失去焦点事件：<input type="text" v-on:change="change">
        <div v-text="msg"></div>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        //vue遍历
        var vm = new Vue({
            el:'#app',
            data:{
                num1:"",
                num2:"",
                sum:"",
                msg:""
            },
            methods:{
                jisuan:function(){
                    this.sum = this.num1 + this.num2;
                },
                change:function(el){
                    this.msg = el.target.value;
                }
            }
        });

    </script>
</body>

</html></SCRIPT>